<template>
    <van-nav-bar
  title="客服中心"
  left-arrow
  @click="back"
/>
    <div class="customer">
        <div class="top">
            <img src="../../image/a40.png" alt="" @click="router.push('/interrogationSearch')">
        </div>
        <div class="bottom">
            <div class="menu">
                <h2>猜你想问</h2>
                <dl>
                    <dt>
                        <img src="../../image/a41.png" alt="">
                    </dt>
                    <dd>账号相关</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../../image/a42.png" alt="">
                    </dt>
                    <dd>申请发票</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../../image/a43.png" alt="">
                    </dt>
                    <dd>会员服务</dd>
                </dl>
                <dl>
                    <dt>
                        <img src="../../image/a44.png" alt="">
                    </dt>
                    <dd>体验预约</dd>
                </dl>
            </div>
            <div class="box">
                <div class="wenzhen">
                    <div class="div1">
                        <div class="left">
                            <dl>
                                <dt>
                                    <img src="../../image/a45.png" alt="">
                                </dt>
                                <dd>专家问诊</dd>
                            </dl>
                        </div>
                        <div class="right">
                            <div class="s1">专家问诊服务说明</div>
                            <div class="s2">问诊医生多久回复我的问题</div>
                            <div class="s3">医生发起问诊后我没有接到</div>
                        </div>
                    </div>
                    <div class="div2">
                         <div class="left">
                            <dl>
                                <dt>
                                    <img src="../../image/a46.png" alt="">
                                </dt>
                                <dd>购药服务</dd>
                            </dl>
                        </div>
                        <div class="right">
                            <div class="s1">怎么在线买药</div>
                            <div class="s2">购药订单多久发货</div>
                            <div class="s3">购药订单是否支持取消</div>
                        </div>
                    </div>
                    <div class="div3">
                         <div class="left">
                            <dl>
                                <dt>
                                    <img src="../../image/a47.png" alt="">
                                </dt>
                                <dd>其他服务</dd>
                            </dl>
                        </div>
                        <div class="right">
                            <div class="s1">微医合作联系方式</div>
                            <div class="s2">健康币如何兑换优惠券</div>
                            <div class="s3">一病多问服务说明</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
// 返回上一页
const back = () => {
    router.go(-1)
}
</script>

<style scoped>
.customer{
   width: 100%;
   height: 100%;
   background: #f4f5f7;
}
.top{
    width: 3.5rem;
    height: 2rem;
    border-radius: .1rem;
    margin-left: .1rem;
    margin-top: .1rem;
}
.top img{
    width: 100%;
    height: 100%;
    border-radius: .1rem;
}
.bottom{
    width: 3.5rem;
    height: 4rem;
    background: #f4f5f7;
    border-radius: .1rem;
    margin-left: .1rem;
    margin-top: .1rem;
}
.menu{
    width: 100%;
    height: 2rem;
    background: #fff;
    border-radius: .1rem;
    position: relative;
}
.menu h2{
    position: absolute;
    top: .2rem;
    left: .2rem;
}
 dl{
    width: .7rem;
    height: .7rem;
    float: left;
    margin-top: .8rem;
    margin-left: .15rem;
}
.menu  dl dt{
    width: 0.3rem;
    height: .3rem;
    margin-top: .1rem;
    margin-left: .18rem;
    border-radius: 50%;
}
.menu  dl dt img{
    width: 100%;
    height: 100%;
}
.menu dl dd{
    width: 100%;
    height: 0.2rem;
    margin-top: .1rem;
}
.box{
    width: 3.5rem;
    height: 5.5rem;
    background: #fff;
    border-radius: .1rem;
    margin-top: .1rem;
    position: relative;
}
.wenzhen{
    width: 3rem;
    height: 5rem;
    border: .01rem solid #ccc;
    position: absolute;
    top: .25rem;
    left: .25rem;
}
.div1{
    width: 100%;
    height: 1.65rem;
    border-bottom: .01rem solid #ccc;
}
.div1 .left{
    width: 1rem;
    height: 1.65rem;
    border-right: .01rem solid #ccc;
    float: left;
}
.div1 .left dl{
    width: .8rem;
    height: .8rem;
    margin-top: .35rem;
    margin-left: .1rem;
}
.div1 .left dl dt{
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    margin-top: .15rem;
    margin-left: .22rem;
}
.div1 .left dl dt img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.div1 .left dl dd{
    width: .8rem;
    height: .25rem;
    margin-top: .1rem;
    margin-left: .05rem;
}
.div1 .right{
    width: 1.99rem;
    height: 1.65rem;
    float: right;
    z-index: 1;
}
.s1{
    width: 100%;
    height: 0.55rem;
    border-bottom: .01rem solid #ccc;
    text-align: center;
    line-height: .5rem;
    z-index: 1;
}
.s2{
    width: 100%;
    height: 0.55rem;
    border-bottom: .01rem solid #ccc;
     text-align: center;
    line-height: .5rem;
    z-index: 1;
}
.s3{
    width: 100%;
    height: 0.55rem;
     text-align: center;
    line-height: .5rem;
    z-index: 1;
}
.div2{
    width: 100%;
    height: 1.65rem;
    border-bottom: .01rem solid #ccc;
}
.div2 .left{
    width: 1rem;
    height: 1.65rem;
    border-right: .01rem solid #ccc;
    float: left;
}
.div2 .left dl{
    width: .8rem;
    height: .8rem;
    margin-top: .35rem;
    margin-left: .1rem;
}
.div2 .left dl dt{
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    margin-top: .15rem;
    margin-left: .22rem;
}
.div2 .left dl dt img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.div2 .left dl dd{
    width: .8rem;
    height: .25rem;
    margin-top: .1rem;
    margin-left: .05rem;
}
.div2 .right{
    width: 1.99rem;
    height: 1.65rem;
    float: right;
    z-index: 1;
}
.div3{
    width: 100%;
    height: 1.68rem;
    border-bottom: .01rem solid #ccc;
}
.div3 .left{
    width: 1rem;
    height: 1.67rem;
    border-right: .01rem solid #ccc;
    float: left;
}
.div3 .right{
    width: 1.99rem;
    height: 1.6rem;
    float: right;
    z-index: 1;
}
.div3 .left dl{
    width: .8rem;
    height: .8rem;
    margin-top: .35rem;
    margin-left: .1rem;
}
.div3 .left dl dt{
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    margin-top: .15rem;
    margin-left: .22rem;
}
.div3 .left dl dt img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.div3 .left dl dd{
    width: .8rem;
    height: .25rem;
    margin-top: .1rem;
    margin-left: .05rem;
}
</style>
